<template>
  <!-- 当前账户 -->
  <view class="page">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <form @submit="onSubmit">
      <!-- 姓名 -->
      <view class="form-item px-38 pt20 bg-white h-115 mt28">
        <label class="tips f-s-32 fw-600">姓名</label>
        <view class="prompt input fw-400 col-balck">{{ formData.name }}</view>
      </view>
      <!-- 手机号码 -->
      <view class="information borRadius-19 bg-white" @click="goToModify">
        <view class="form-item h-115 mx-38">
          <label class="tips fw-600">手机号码</label>
          <view class="prompt input fw-400 col-balck">{{
            formData.phone
          }}</view>
        </view>
      </view>
      <!-- 密码 -->
      <view class="information borRadius-19 bg-white">
        <view class="form-item h-115 mx-38">
          <label class="tips fw-600">密码</label>
          <input
            type="password"
            v-model="formData.password"
            class="prompt input fw-400 col-balck"
            placeholder="请输入密码"
          />
        </view>
      </view>
      <!-- 安全密码 -->
      <view class="information borRadius-19 bg-white pb20">
        <view class="form-item h-115 mx-38">
          <label class="tips fw-600">确认密码</label>
          <input
            type="password"
            v-model="formData.confirmPassword"
            class="prompt input fw-400 col-balck"
            placeholder="请输入确认密码"
          />
        </view>
      </view>
    </form>
    <view class="btnBpx">
      <button
        :loading="loading"
        open-type=""
        class="btn"
        hover-class="button-hover"
        @click="onSubmit"
      >
        {{ "确认" }}
      </button></view
    >
  </view>
</template>

<script>
import navBar from "@/components/navBar";
import { changeUserPassword } from "@/api/user";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      title: "修改密码",
      backgroundColor: "#fff",
      loading: false,
      formData: {
        phone: "",
        name: "",
        password: "",
        confirmPassword: "", // 确认密码
      },
    };
  },
  onLoad(options) {
    if (Object.keys(options).length) {
      this.formData.phone = options.phone;
      this.formData.name = options.name;
    }
  },
  mounted() {},
  methods: {
    onSubmit() {
      let that = this;
      if (!this.formData.password) {
        uni.showToast({ title: "请输入密码", icon: "none" });
        return;
      }
      if (!this.formData.confirmPassword) {
        uni.showToast({ title: "请输入确认密码", icon: "none" });
        return;
      }
      uni.showModal({
        content: "确定修改密码吗？",
        success: function (res) {
          if (res.confirm) {
            let data = {
              username: that.formData.name,
              password: that.formData.password, // 密码
              newpassword1: that.formData.confirmPassword, // 新密码
            };
            changeUserPassword(data).then((res) => {
              that.$util.Tips({
                title: "修改成功",
              });
              setTimeout(function () {
                uni.redirectTo({
                  url: "/pages/index/index",
                });
              }, 800);
            });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  //   margin-bottom: 20px;
}
.mt-24 {
  margin-top: 24rpx;
}
.h-115 {
  height: 115rpx;
}
.px-38 {
  padding: 0rpx 38rpx;
}
.mx-38 {
  margin: 0rpx 38rpx;
}
.prompt {
  width: 450rpx;
  font-size: 32rpx;
  color: #b2aeae;
}
.col-balck {
  color: #000 !important;
}

.input {
  text-align: right;
}
.pt20 {
  padding-top: 20rpx;
}
.pb20 {
  padding-bottom: 20rpx;
}
.forwardShow {
  width: 11rpx;
  height: 20rpx;
}
.btnBpx {
  position: fixed;
  bottom: 40rpx;
  width: 100%;
}
.btn {
  margin: 0rpx 31rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #664fe9;
  border-radius: 14rpx;
  font-size: 31rpx;
  color: #ffffff;
}
.mr10 {
  margin-right: 10rpx;
}
</style>
